.menu-container {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

body.light-mode .menu-column {
  flex-basis: 88%;
  background-color: #f4f4f4;
  padding: 45px;
  border-radius: 70px 15px 70px 15px;
  box-shadow: 0 2px 20px 3px rgb(0 0 0 / 21%);
}

body.dark-mode .menu-column {
  flex-basis: 88%;
  background-color: #303030;
  padding: 45px;
  border-radius: 70px 15px 70px 15px;
  box-shadow: 0 2px 20px 3px rgb(0 0 0 / 21%);
}

body.light-mode .menu-column-second {
  background-color: #f4f4f4;
  padding: 60px;
  border-radius: 70px 15px 70px 15px;
  box-shadow: 0 2px 20px 3px rgb(0 0 0 / 21%);
  margin: 0 0 45px 0;
}

body.dark-mode .menu-column-second {
  background-color: #393939;
  padding: 60px;
  border-radius: 70px 15px 70px 15px;
  box-shadow: 0 2px 20px 3px rgb(0 0 0 / 21%);
  margin: 0 0 45px 0;
}

body.light-mode .menu-column h2 {
  color: #333;
  font-size: 50px;
  margin: 0 0 15px 0;
}

body.dark-mode .menu-column h2 {
  color: cornsilk;
  font-size: 50px;
  margin: 0 0 15px 0;
}

body.dark-mode .menu-column h3 {
  font-size: xx-large;
  color: cornsilk;
  margin: 0 0 25px 0;
}

body.light-mode .menu-column h3 {
  font-size: xx-large;
  color: #333;
  margin: 0 0 25px 0;
}

body.light-mode .menu-item {
  display: flex;
  font-size: 34px;
  padding: 20px;
  background-color: #e9e9e9;
  border-radius: 26px;
  cursor: pointer;
  justify-content: center;
  font-weight: 700;
}

body.dark-mode .menu-item {
  color: cornsilk;
  display: flex;
  font-size: 34px;
  padding: 20px;
  background-color: #1e1e1e;
  border-radius: 26px;
  cursor: pointer;
  justify-content: center;
  font-weight: 700;
}

.menu-item:hover {
  background-color: #d6d6d6;
}

body.light-mode .menu-description {
  display: flex;
  font-size: 27px;
  color: #666;
  margin: 10px 0 20px 15px;
}

body.dark-mode .menu-description {
  display: flex;
  font-size: 27px;
  color: #b4b4b4;
  margin: 10px 0 20px 15px;
}

.spacer {
  height: 100px;
}
